<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">公告</span>
    </div>
    <div class="info">
      <div class="info_list">
        <div class="list_ul" v-for="(item, index) in noticeList" :key="index" @click="goNoticeDetails(item.id)">
          <ul style="list-style-type: none">
            <li>
              <div class="ul_title">{{ item.title }}</div>
              <div class="ul_date">{{ item.createTime[0] }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeList: [],
    };
  },

  created() {
    this.getNoticeList();
  },

  methods: {
    goNoticeDetails(noticeId) {
      this.$router.push({ path: '/noticeDetails', query: { noticeId: noticeId } });
    },
    back() {
      this.$router.go(-1);
    },
    async getNoticeList() {
      const { data: res } = await this.$http.get('notice/getAllNoticeList');
      if (res.code == 1) {
        this.noticeList = res.data;
        for (let i = 0; i < this.noticeList.length; i++) {
          this.noticeList[i].createTime = this.noticeList[i].createTime.split(' ');
        }
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  .header {
    background-color: #fece4e;
    height: 50px;
    color: #fff;
    text-align: center;
    position: relative;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 50px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 50px;
      font-weight: bold;
    }
  }
  .info {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #f0f0f0;
    height: calc(100vh - 50px);
    .info_list {
      background-color: #fff;
      height: auto;
      .list_ul {
        border-bottom: 2px solid #f4f4f4;
        padding: 20px;

        ul > li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .ul_title {
            color: #0e0e0e;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .ul_date {
            color: #b3b3b3;
          }
        }
      }
    }
  }
}
</style>